import React, { Component } from 'react';
import { Breadcrumb, Button, Table, Popconfirm, Icon, Modal } from 'tinper-bee';
import { vendorsTrimStr, vendorsDanger, vendorsFmtDate } from 'utils/config.js';
import './index.less';
import App from "../../layout/App";
import { editWorkData } from "../WorkDataBuild/workdatabuild.config.js"
import Previewer from './../WorkDataDoc/previewer.jsx';

export default class WorkDataCataDetail extends Component {
    constructor(props) {
        super(props);
        let _self = this;
        this.state = {
            creator: "",
            creationtime: "",
            columns: [
                { title: "序号", dataIndex: "sequence", key: "sequence", width: "6%" },
                { title: "清单名称", dataIndex: "sname", key: "sname", width: '40%' },
                {
                    title: "资料名称", dataIndex: "datumContentScode", key: "datumContentScode", width: '54%',
                    render(text, record, index) {
                        if (record.datumType == 0) {
                            return (
                                <div >{text}</div>
                            )
                        } else if (record.datumType == 1) {
                            return (
                                <span className='hclickablespan' onClick={_self.viewTemplate.bind(null, record)}>{text}</span>
                            )
                        }
                    }
                },
            ]
        };
    }

    getTableData = (data) => {
        for (let i = 0; i < data.length; i++) {
            let item = data[i];
            let itemContent = item.datumContent;
            item["key"] = item["pkCompletedCatalogB"];
            item["dangerBorder"] = "";

            if (item.datumType == 1) {
                item.datumContentScode = item.datumContent;
            } else {
                if (itemContent == "GXBY") {
                    item.datumContentScode = "工序报验"
                } else if (itemContent == "SGJL") {
                    item.datumContentScode = "施工记录"
                } else if (itemContent == "XCJC") {
                    item.datumContentScode = "现场检查"
                } else if (itemContent == "WTJL") {
                    item.datumContentScode = "问题记录"
                } else if (itemContent == "GXPZ") {
                    item.datumContentScode = "工序拍照"
                } else if (itemContent == "GZLX") {
                    item.datumContentScode = "工作联系"
                } else if (itemContent == "JDJH") {
                    item.datumContentScode = "进度计划"
                } else if (itemContent == "JDFK") {
                    item.datumContentScode = "进度反馈"
                } else if (itemContent == "ZHYS") {
                    item.datumContentScode = "综合验收"
                }
            }

        }
        return data;
    };
    componentDidMount() {
        let pkCompletedCatalog = sessionStorage.getItem("editcata");
        this.pkCompletedCatalog = pkCompletedCatalog;
        editWorkData({ pkCompletedCatalog, ieStamp: new Date().getTime(), isAjax: 1 }).then((res) => {
            let data = res.data;
            if (data.resultCode == "ok") {
                data = data.result;
                let creationtime = vendorsFmtDate(data.creationtime);
                let tableData = this.getTableData(data.completedCatalogBVOS);
                this.changeFlag = data.changeFlag;
                this.setState({
                    creator: data.creatorName,
                    creationtime,
                    sname: data.sname,
                    catalogType: data.catalogType,
                    tableData
                }, () => {
                    this.addNumber(this.state.tableData)
                })
            }
        });

    }
    changeData = (text, index, item) => {
        this.setState({ text, flagIndex: index, scode: item.scode });
    };

    addNumber = (tableData) => {
        let data = tableData ? tableData : [];
        for (let i = 0; i < data.length; i++) {
            let item = data[i];
            item["sequence"] = `0${i + 1}`;
            if (item["sequence"] > 9) {
                item["sequence"] = `${i + 1}`
            }
        }
        this.setState({ tableData: data })
    };
    handleCancelClick = () => {
        window.location.href = "/workdatacata.html";
    };

    closeViewModal = () => {
        this.setState({
            showViewModal: false
        })
    }

    viewTemplate = (cur) => {
        // if (cur.percent < 100) {
        //     vendorsDanger({ 'text': '请等待文件上传完成后再进行预览！' });
        //     return;
        // }
        this.setState({
            showViewModal: true,
            viewossName: cur.ossName
        })
    }

    render() {
        return (
            <App>
                <div className="workdata">
                    <div className="workdata__header clearfix">
                        <div className="workdata__header__left">
                            <Breadcrumb>
                                <Breadcrumb.Item active>
                                    目录列表
                                </Breadcrumb.Item>
                                <Breadcrumb.Item active>
                                    查看目录
                                </Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div className="workdata__header__right">
                            <ul className="clearfix">
                                <li className="magin-li">
                                    <span>创建人:&ensp;</span>
                                    <span>{this.state.creator}</span>
                                </li>
                                <li>
                                    <span>创建时间:&ensp;</span>
                                    <span>{this.state.creationtime}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div className="workdata__content">
                        <div className="workdata__content__header clearfix">
                            <div className="workdata__content__title">基本信息</div>
                            <div className="workdata__content__btngroup">
                                <Button isSubmit={true} className="cancel" onClick={this.handleCancelClick}>返回</Button>
                            </div>
                        </div>
                        <div className="workdata__content__inputgroup clearfix">
                            <div className="magin-input">
                                <span>目录名称&ensp;:</span>
                                <input type="text" autoComplete="off" placeholder="请输入" id="catalog" value={this.state.sname} disabled />
                            </div>
                            <div>
                                <span>项目类别&ensp;:</span>
                                <input type="text" autoComplete="off" placeholder="请输入" id="type" value={this.state.catalogType} disabled />
                            </div>
                        </div>
                        <div className="tablebox">
                            <Table
                                columns={this.state.columns}
                                data={this.state.tableData}
                                scroll={{ y: 460 }}
                                bordered
                                emptyText={() => '暂无数据'}
                            />
                        </div>
                    </div>
                </div>
                <Previewer show={this.state.showViewModal} onClose={this.closeViewModal} viewossName={this.state.viewossName} />
            </App>

        );
    }
};